<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食分享</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/json2.js"></script>
    <script src="js/ajaxfileupload.js"></script>
    <script>
        var cateInfo = {};  // json格式保存上传的美食信息
        var userid;
    </script>
    <script>
        // 获取用户ID
        $.ajax({
            url: "homePage",
            type: "post",
            dataType: "json",
            success:function (user) {
                var obj = user;
                if (obj != null) {
                    userid = obj.userId;
                }
            },
            error:function () {
                alert("您还没有登录，快去登录吧~")
            }
        })
        // 上传美食图片
        function ajaxFileUpload() {
            var filename = $("#myUpload").val();
            filename = filename.substring(filename.lastIndexOf("\\") + 1);
            // 获取文件扩展名
            exname = filename.substring(filename.lastIndexOf(".") + 1);
            if (exname.indexOf("png") != -1 || exname.indexOf("jpg") != -1 || exname.indexOf("gif") != -1
                || exname.indexOf("bmp") != -1 || exname.indexOf("jpeg") != -1 || exname.indexOf("jfif") != -1) {
                $.ajaxFileUpload({
                    url: "uploadImg",
                    secureuri: false,
                    fileElementId: "myUpload",  // 传递名为myUpload的文件
                    dataType: "text",
                    success:function (data) {
                        // 如果成功，则设置ID为pic的图片的src，这样pic就能成功显示，设置图片的src值
                        $("#pic").attr("src", data);
                    },
                    error:function (data) {
                        alert("error");
                    }
                });
            } else {
                alert("必须是图片！！")
            }
            return false;
        }
        // 客户提交美食信息
        $(function () {
            $("#submit").click(function () {
                cateInfo.cateName = $("#cateName").val();
                cateInfo.cateType = $("#cateType").val();
                cateInfo.cateImage = $("#pic").attr("src");
                cateInfo.foodMaterial = $("#cateMaterial").val();
                cateInfo.ingredients = $("#ingredients").val();
                cateInfo.elapsedTime = $("#elapsedTime").val() + $("#timeType").val();
                cateInfo.guide = $("#guide").val();
                cateInfo.level = $("#level").val();
                cateInfo.userId = userid;
                var cateJson = JSON.stringify(cateInfo);
                $.ajax({
                    url : "shareCate",
                    type: "post",
                    data: {"cate":cateJson},
                    success:function (data) {
                        if (data == "ok") {
                            window.location.href = "main.html";
                        } else {
                            alert("上传失败！！");
                        }
                    },
                    error:function () {
                        alert("系统错误！！");
                    }
                })
            })
        })
    </script>
<!--    <style>-->
<!--        body {-->
<!--            overflow: hidden;-->
<!--        }-->
<!--    </style>-->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <form id="picUpload" action="" method="post" enctype="multipart/form-data">
                    <br>
                    <img id="pic" src="" style="width: 300px; height: 280px;">
                </form>
                <form id="cateInfo" action="" method="post">
                    <div class="form-group">
                        <label for="cateName">品名：</label>
                        <input type="text" class="form-control" id="cateName" placeholder="为这道美食起个名字吧">
                    </div>
                    <div class="form-group">
                        <label for="cateType">类型：</label>
                        <select class="form-control" id="cateType">
                            <option>热菜</option>
                            <option>凉菜</option>
                            <option>主食</option>
                            <option>小吃</option>
                        </select>
                    </div>
                </form>
                <p>图片：</p>
                <div class="custom-file mb-3">
                    <input type="file"  id="myUpload" name="myUpload" class="custom-file-input" onchange="ajaxFileUpload()">
                    <label class="custom-file-label" for="myUpload">选择文件</label>
                </div>
                <div class="form-group">
                    <label for="cateMaterial">原料：</label>
                    <input type="text" class="form-control" id="cateMaterial" placeholder="这道美食需要的原料" form="cateInfo">
                </div>
                <div class="form-group">
                    <label for="ingredients">辅料：</label>
                    <input type="text" class="form-control" id="ingredients" placeholder="这道美食需要的辅料" form="cateInfo">
                </div>

                <div class="form-group">
                    <label for="level">难度：</label>
                    <select class="form-control" id="level" form="cateInfo">
                        <option>简单</option>
                        <option>适中</option>
                        <option>较难</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="elapsedTime">耗时：</label><br>
                    <div class="custom-control-inline">
                        <input type="text" class="form-control" id="elapsedTime" placeholder="请输入阿拉伯数字" form="cateInfo">
                        <select id="timeType" form="cateInfo">
                            <option>分钟</option>
                            <option>小时</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="guide">制作指南：</label>
                    <textarea class="form-control" rows="5" id="guide" form="cateInfo"></textarea>
                </div>
                <button type="button" class="btn btn-primary" id="submit">点我分享</button>
                </form>
            </div>
            <div class="col-2"></div>
        </div>
    </div>
</body>
</html>